<style>
* {
  margin: 0;
  padding: 0;
}


</style>

<template>
  <div class="message" align="center">
    <h3 align="left" style="margin-left: 80px;margin-top: 80px">消息管理</h3>
    <div>
      <div style="margin-left: 80px;height: 700px;float: left;width: 200px;text-align: left">
        <div v-for="item in this.persons">
          <p @click="text=item.name" style="margin-top: 10px">{{ item.name }}</p>
        </div>
      </div>
      <div v-show="text!=''" style="float: left;height: 700px">
        <div>
          <p style="height: 40px;background-color: #d3dce6;width: 1000px;padding-top: 20px;text-align: left;padding-left: 20px">
            {{ text }}</p>
        </div>
        <div style="height: 630px;background-color: #f8f8f8">
          <div style="height: 500px;">
            <div v-show="xx" style="height: 35px;" align="right">
              <span style="margin-left: 20px">{{ xx }}&nbsp;&nbsp;</span>
              <span style="color: #2c3e50">:{{ user.name }}</span>
            </div>
          </div>
          <div style="height: 130px;background-color: white">

            <el-input v-model="message" placeholder="请输入内容"></el-input>
            <p style="margin-top: 100px" align="right">
              <el-button type="primary" v-model="xx" @click="fs">发送</el-button>
            </p>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>


export default {
  data() {
    return {
      xx: "",
      message: "",
      persons: [],
      text: "",
      residentInfo: {},
      user: {},
      ws:null,
    };
  },
  methods: {
    // 发送消息
    fs() {
      this.xx = this.message;
      this.message = "";
    },

    // 连接websocket
     ks(){
      this.ws = new WebSocket("ws://localhost:8202/chat");
      this.ws.onopen = function () {
        console.log("连接成功");
      };
      this.ws.onmessage = function (e) {
        console.log(e.data);
      };
    },


    //   获取用户的所有信息
    getAll() {
      this.axios.get(`http://localhost:8202/person/getAll`).then(res => {
        this.persons = res.data.data;
      })
    },


    //   获取给谁发消息的信息
    getInfo() {
      this.axios.get(`http://localhost:8202/person/getInfo?id=${this.$route.query.id}`).then(res => {
        this.residentInfo = res.data.data;
        this.text = this.residentInfo.name;
      })
    }
  },
  created() {
    this.ks();
    if (this.$route.query.id != null) {
      this.getInfo();
    }
    this.getAll();
    var item = localStorage.getItem("user");
    this.user = JSON.parse(item);
  },
};
</script>
